<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>压装工位系统 IPC-OP1005</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            overflow: hidden;
        }

        /* 顶部标题栏 */
        .top-header {
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .system-title {
            font-size: 24px;
            font-weight: bold;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
            font-size: 14px;
        }

        .plc-status {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #28a745;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* 顶部信息栏 */
        .top-info-section {
            height: 80px;
            background-color: white;
            display: flex;
            padding: 10px 20px;
            gap: 20px;
            border-bottom: 2px solid #e0e0e0;
        }

        .barcode-scan-area {
            width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 8px 10px;
            border: 2px solid #007bff;
            border-radius: 8px;
            background-color: #f8f9fa;
        }

        .barcode-scan-area label {
            font-size: 13px;
            font-weight: bold;
            margin-bottom: 4px;
            color: #333;
        }

        .barcode-scan-area input {
            padding: 6px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 13px;
        }

        .product-info-area {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }

        .info-item {
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 8px 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .info-label {
            font-size: 12px;
            color: #6c757d;
            margin-bottom: 4px;
        }

        .info-value {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        /* 主容器 */
        .main-container {
            height: calc(100vh - 140px);
            display: flex;
            gap: 15px;
            padding: 15px 20px;
        }

        /* 左侧面板 */
        .left-panel {
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* 设备信息与测量数据合并区域 */
        .device-measurement-section {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            height: 250px;
        }

        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 2px solid #007bff;
            flex-shrink: 0;
        }

        .device-measurement-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            height: calc(100% - 45px);
        }

        .device-info-box, .measurement-box {
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 10px;
            background-color: #f8f9fa;
        }

        .sub-title {
            font-size: 14px;
            font-weight: bold;
            color: #555;
            margin-bottom: 10px;
            text-align: center;
        }

        .data-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }

        .measurement-box .data-grid {
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .data-card {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 8px;
            text-align: center;
        }

        .data-label {
            font-size: 11px;
            color: #6c757d;
            margin-bottom: 4px;
        }

        .data-value {
            font-size: 16px;
            font-weight: bold;
            color: #007bff;
        }

        /* 检测结果区域 */
        .result-section {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            height: 110px;
        }

        .result-display {
            height: calc(100% - 40px);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            font-size: 40px;
            font-weight: bold;
            color: white;
        }

        .result-ng {
            background-color: #dc3545;
        }

        .result-ok {
            background-color: #28a745;
        }

        /* 操作控制区域 */
        .control-section {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex: 1;
        }

        .control-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: auto auto;
            gap: 10px;
            height: calc(100% - 40px);
        }

        .control-btn {
            padding: 8px 10px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: bold;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .control-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .btn-reject {
            background-color: #dc3545;
            grid-column: span 3;
        }

        .btn-reject:hover {
            background-color: #c82333;
        }

        .btn-offline {
            background-color: #ffc107;
            grid-column: span 3;
        }

        .btn-offline:hover {
            background-color: #e0a800;
        }

        .btn-request {
            background-color: #007bff;
            grid-column: span 2;
        }

        .btn-request:hover {
            background-color: #0056b3;
        }

        .btn-allow {
            background-color: #28a745;
            grid-column: span 2;
        }

        .btn-allow:hover {
            background-color: #218838;
        }

        .btn-process {
            background-color: #17a2b8;
            grid-column: span 2;
        }

        .btn-process:hover {
            background-color: #138496;
        }

        /* 右侧面板 */
        .right-panel {
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* 过站信息区域 */
        .station-info-section {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            height: 250px;
        }

        .table-container {
            height: calc(100% - 40px);
            overflow-y: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 13px;
        }

        thead {
            position: sticky;
            top: 0;
            background-color: #007bff;
            color: white;
            z-index: 10;
        }

        th {
            padding: 10px 8px;
            text-align: center;
            font-weight: bold;
        }

        td {
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #e0e0e0;
        }

        tbody tr:hover {
            background-color: #f1f3f5;
        }

        .badge {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
        }

        .badge-ok {
            background-color: #28a745;
            color: white;
        }

        .badge-ng {
            background-color: #dc3545;
            color: white;
        }

        /* 压装曲线区域 */
        .curve-section {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex: 1;
            min-height: 320px;
            display: flex;
            flex-direction: column;
        }

        .curve-controls {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        .curve-btn {
            flex: 1;
            padding: 3px 8px;
            border: 2px solid #007bff;
            border-radius: 6px;
            background-color: white;
            color: #007bff;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 13px;
        }

        .curve-btn.active {
            background-color: #007bff;
            color: white;
        }

        .curve-btn:hover {
            background-color: #e7f3ff;
        }

        .curve-btn.active:hover {
            background-color: #0056b3;
        }

        .chart-container {
            flex: 1;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 5px 5px 0px 5px;
            background-color: #fafafa;
            position: relative;
            min-height: 220px;
        }

        canvas {
            width: 100% !important;
            height: 100% !important;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .main-container {
                flex-direction: column;
            }

            .left-panel, .right-panel {
                width: 100%;
            }

            .top-info-section {
                flex-direction: column;
                height: auto;
            }

            .barcode-scan-area {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部标题栏 -->
    <div class="top-header">
        <div class="system-title">压装工位系统 IPC-OP1005</div>
        <div class="header-right">
            <span id="currentUser">管理员</span>
            <span id="currentTime">2024-01-15 10:35:42</span>
            <div class="plc-status">
                <span class="status-dot"></span>
                <span>箱体上线PLC</span>
            </div>
        </div>
    </div>

    <!-- 顶部信息栏 -->
    <div class="top-info-section">
        <!-- 条码扫描区域 -->
        <div class="barcode-scan-area">
            <label>条码扫描</label>
            <input type="text" id="barcodeInput" placeholder="请扫描产品条码..." />
        </div>

        <!-- 产品信息区域 -->
        <div class="product-info-area">
            <div class="info-item">
                <div class="info-label">产品代码</div>
                <div class="info-value" id="productCode">-</div>
            </div>
            <div class="info-item">
                <div class="info-label">产品型号</div>
                <div class="info-value" id="productModel">-</div>
            </div>
            <div class="info-item">
                <div class="info-label">工位节拍</div>
                <div class="info-value" id="stationCycle">-</div>
            </div>
            <div class="info-item">
                <div class="info-label">加工数量</div>
                <div class="info-value" id="processCount">-</div>
            </div>
        </div>
    </div>

    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧面板 -->
        <div class="left-panel">
            <!-- 设备信息与测量数据合并区域 -->
            <div class="device-measurement-section">
                <div class="section-title">设备信息与测量数据</div>
                <div class="device-measurement-grid">
                    <!-- 设备信息 -->
                    <div class="device-info-box">
                        <div class="sub-title">设备信息</div>
                        <div class="data-grid">
                            <div class="data-card">
                                <div class="data-label">设备编号</div>
                                <div class="data-value" id="deviceId">IPC-OP1005</div>
                            </div>
                            <div class="data-card">
                                <div class="data-label">当前程序</div>
                                <div class="data-value" id="currentProgram">P001</div>
                            </div>
                        </div>
                    </div>

                    <!-- 实时测量数据 -->
                    <div class="measurement-box">
                        <div class="sub-title">实时测量数据</div>
                        <div class="data-grid">
                            <div class="data-card">
                                <div class="data-label">最终位置</div>
                                <div class="data-value" id="finalPosition">229.97 mm</div>
                            </div>
                            <div class="data-card">
                                <div class="data-label">最终力值</div>
                                <div class="data-value" id="finalForce">3.84 N</div>
                            </div>
                            <div class="data-card">
                                <div class="data-label">位移峰值</div>
                                <div class="data-value" id="peakDisplacement">229.97 mm</div>
                            </div>
                            <div class="data-card">
                                <div class="data-label">力值峰值</div>
                                <div class="data-value" id="peakForce">3.89 N</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 检测结果区域 -->
            <div class="result-section">
                <div class="section-title">检测结果</div>
                <div class="result-display result-ng" id="resultDisplay">NG</div>
            </div>

            <!-- 操作控制区域 -->
            <div class="control-section">
                <div class="section-title">操作控制</div>
                <div class="control-grid">
                    <button class="control-btn btn-reject" onclick="handleReject()">不合格放行</button>
                    <button class="control-btn btn-offline" onclick="handleOffline()">不合格下线</button>
                    <button class="control-btn btn-request" onclick="handleRequest()">申请进站</button>
                    <button class="control-btn btn-allow" onclick="handleAllow()">允许进站</button>
                    <button class="control-btn btn-process" onclick="handleProcess()">是否加工</button>
                </div>
            </div>
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
            <!-- 过站信息区域 -->
            <div class="station-info-section">
                <div class="section-title">过站信息</div>
                <div class="table-container">
                    <table>
                        <thead>
                            <tr>
                                <th>产品编号</th>
                                <th>物料代码</th>
                                <th>物料名称</th>
                                <th>进站时间</th>
                                <th>出站时间</th>
                                <th>结果</th>
                            </tr>
                        </thead>
                        <tbody id="stationTableBody">
                            <tr>
                                <td>P001-001</td>
                                <td>M001</td>
                                <td>轴承座</td>
                                <td>10:30:25</td>
                                <td>10:30:45</td>
                                <td><span class="badge badge-ng">NG</span></td>
                            </tr>
                            <tr>
                                <td>P001-002</td>
                                <td>M002</td>
                                <td>轴承</td>
                                <td>10:31:10</td>
                                <td>10:31:30</td>
                                <td><span class="badge badge-ok">OK</span></td>
                            </tr>
                            <tr>
                                <td>P001-003</td>
                                <td>M001</td>
                                <td>轴承座</td>
                                <td>10:32:05</td>
                                <td>10:32:25</td>
                                <td><span class="badge badge-ok">OK</span></td>
                            </tr>
                            <tr>
                                <td>P001-004</td>
                                <td>M003</td>
                                <td>密封圈</td>
                                <td>10:33:10</td>
                                <td>10:33:30</td>
                                <td><span class="badge badge-ng">NG</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 压装曲线区域 -->
            <div class="curve-section">
                <div class="section-title">压装曲线</div>
                <div class="curve-controls">
                    <button class="curve-btn active" onclick="switchCurve('torque')">扭矩/时间</button>
                    <button class="curve-btn" onclick="switchCurve('displacement')">位移/时间</button>
                </div>
                <div class="chart-container">
                    <canvas id="pressureChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        // 时间更新
        function updateTime() {
            const now = new Date();
            const timeString = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            }).replace(/\//g, '-');
            document.getElementById('currentTime').textContent = timeString;
        }
        setInterval(updateTime, 1000);
        updateTime();

        // 条码扫描处理
        document.getElementById('barcodeInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                const barcode = this.value.trim();
                if (barcode) {
                    // 调用后端API获取产品信息
                    fetchProductByBarcode(barcode);
                }
            }
        });

        // 通过Ajax请求后端获取产品信息
        function fetchProductByBarcode(barcode) {
            // 显示加载状态
            document.getElementById('productCode').textContent = '加载中...';
            document.getElementById('productModel').textContent = '加载中...';
            document.getElementById('stationCycle').textContent = '加载中...';
            document.getElementById('processCount').textContent = '加载中...';

            // 发送Ajax请求
            fetch('/api/product/getByBarcode?barcode=' + encodeURIComponent(barcode))
                .then(response => response.json())
                .then(data => {
                    if (data.success && data.data) {
                        // 更新产品信息
                        const product = data.data;
                        document.getElementById('productCode').textContent = product.productCode || '-';
                        document.getElementById('productModel').textContent = product.productModel || '-';
                        document.getElementById('stationCycle').textContent = product.stationCycle ? product.stationCycle + 's' : '-';
                        document.getElementById('processCount').textContent = product.processCount || '-';
                        
                        // 显示成功提示
                        console.log('产品信息加载成功:', product);
                    } else {
                        // 未找到产品信息
                        document.getElementById('productCode').textContent = '-';
                        document.getElementById('productModel').textContent = '-';
                        document.getElementById('stationCycle').textContent = '-';
                        document.getElementById('processCount').textContent = '-';
                        
                        alert(data.message || '未找到该条码对应的产品信息');
                    }
                })
                .catch(error => {
                    console.error('请求失败:', error);
                    
                    // 显示错误信息
                    document.getElementById('productCode').textContent = '-';
                    document.getElementById('productModel').textContent = '-';
                    document.getElementById('stationCycle').textContent = '-';
                    document.getElementById('processCount').textContent = '-';
                    
                    alert('请求失败，请检查网络连接或后端服务是否启动');
                });
        }

        // 实时测量数据更新
        function updateMeasurementData() {
            const finalPos = (229.5 + Math.random() * 1).toFixed(2);
            const finalForce = (3.8 + Math.random() * 0.2).toFixed(2);
            const peakPos = (229.7 + Math.random() * 0.5).toFixed(2);
            const peakForce = (3.85 + Math.random() * 0.1).toFixed(2);

            document.getElementById('finalPosition').textContent = finalPos + ' mm';
            document.getElementById('finalForce').textContent = finalForce + ' N';
            document.getElementById('peakDisplacement').textContent = peakPos + ' mm';
            document.getElementById('peakForce').textContent = peakForce + ' N';
        }
        setInterval(updateMeasurementData, 2000);

        // 操作按钮处理
        function handleReject() {
            alert('不合格放行操作');
        }

        function handleOffline() {
            alert('不合格下线操作');
        }

        function handleRequest() {
            alert('申请进站操作');
        }

        function handleAllow() {
            alert('允许进站操作');
        }

        function handleProcess() {
            const result = confirm('是否进行加工？');
            if (result) {
                alert('开始加工');
            }
        }

        // 压装曲线切换
        let currentChart = null;
        let currentCurveType = 'torque';

        function switchCurve(type) {
            currentCurveType = type;
            document.querySelectorAll('.curve-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            initChart(type);
        }

        // 初始化图表
        function initChart(type) {
            const ctx = document.getElementById('pressureChart').getContext('2d');
            
            if (currentChart) {
                currentChart.destroy();
            }

            const labels = [];
            const data = [];
            
            if (type === 'torque') {
                // 扭矩数据
                for (let i = 0; i <= 20; i++) {
                    labels.push(i);
                    data.push(Math.sin(i / 3) * 2 + 3 + Math.random() * 0.5);
                }
            } else {
                // 位移数据
                for (let i = 0; i <= 20; i++) {
                    labels.push(i);
                    data.push(i * 11 + Math.random() * 5);
                }
            }

            currentChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: type === 'torque' ? '扭矩 (N·m)' : '位移 (mm)',
                        data: data,
                        borderColor: type === 'torque' ? '#dc3545' : '#007bff',
                        backgroundColor: type === 'torque' ? 'rgba(220, 53, 69, 0.1)' : 'rgba(0, 123, 255, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top'
                        }
                    },
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: '时间 (s)'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: type === 'torque' ? '扭矩 (N·m)' : '位移 (mm)'
                            }
                        }
                    }
                }
            });
        }

        // 页面加载时初始化图表
        window.addEventListener('load', function() {
            initChart('torque');
        });

        // 定时更新图表数据
        setInterval(function() {
            if (currentChart) {
                const newData = currentChart.data.datasets[0].data.map(val => {
                    return val + (Math.random() - 0.5) * 0.5;
                });
                currentChart.data.datasets[0].data = newData;
                currentChart.update('none');
            }
        }, 3000);
    </script>
</body>
</html>

